function Swiper(el,option = {}){
    this.el = document.querySelector(el)     // 给最大的盒模型存放起来。this指的是swiper1和swiper2

    this.num = 1     //【需要写在构造函数里面，下面所有的num都必须加this，因为有多个盒模型，如果不写this的话，图片和分页器就不会同步，上下轮播图也会相互影响】

    this.t = null

    this.init()          // 调用插件初始化，对象上没有init方法，所以在原型上写，然后在构造函数里调用

}

Swiper.prototype.init = function(){
    // 轮播图步骤：
    // 一、每隔一秒切换图片和分页器
    this.autoPlay()
    // 二、鼠标移入分页器
    this.over()
    // 三、鼠标移出分页器
    // this.out()     // 这里不用调用，底下在鼠标移出的时候调用了即可
}

Swiper.prototype.pagination = function(num){
    // 6、同步分页器
            // 6.1 清空目前分页器的class
            this.el.querySelector('ul li.active').className = ''
            // 6.2 给当前移入的分页器加class
            this.el.querySelectorAll('ul li')[num-1].className = 'active'
}

Swiper.prototype.autoPlay = function(){
    // 一、每隔1秒自动切换图片和分页器
    // 步骤：
    // 1、写定时器
    this.t = setInterval(() => {        // 定时器不写箭头函数，this指的是window，写了箭头函数，this指的是父function中的this，即原型方法中的this===实例化对象
    // t 如果在这里写let的话，是块级作用域，外面不能用，而且有多个轮播图，意味着有多个定时器，所以需要加this，直接写在构造函数里面
        // 2、定时器外面定义num全局变量
        // 3、定时器里面num++
        this.num++
        // 4、过滤，判断num，只有六张图片
        if(this.num>6) this.num=1
        // 5、同步图片
        this.el.querySelector('img').src = `./img/b${this.num}.jpeg`
        // 6、同步分页器
        this.pagination(this.num)
    },1000)
}

Swiper.prototype.over = function(){
    // 二、鼠标移入分页器
    // 步骤：
    // 1、获取【当前盒模型】里面的所有分页器
    let ulLiObjs = this.el.querySelectorAll('ul li')
    // 2、遍历
    ulLiObjs.forEach((item,i) => {
        // 3、给每个分页器绑定鼠标移入事件
        item.onmousemove = () => {     // 此时事件函数如果不写箭头的话，this指的是item事件源，此时需要改变this指向
            // 3.1 清除定时器
            clearInterval(this.t)
            // 3.2 同步图片
            this.el.querySelector('img').src = `./img/b${i+1}.jpeg`
            // 3.3 同步分页器
            this.pagination(this.num)
            // 3.4 同步索引
            this.num = i+1
            // 分析：如果现在看到的是第五张图片，鼠标移入到第二张图片，则下一步鼠标移走之后图片需要从第三张开始切换，所以索引也学要同步，即this.num = i+1
        }
        // 4、给每个分页器绑定鼠标移出事件
            // 4.1重新开启定时器
            item.onmouseout = () => {
                this.out()
            }
    })
}

Swiper.prototype.out = function(){
    // 三、鼠标移出分页器
    // 步骤：重新开启定时器
    this.autoPlay()    // 调用封装的第一步：每隔1秒自动切换图片和分页器
}
